<template>
  <div>
    <el-table
      ref="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" :label="$t('message.zxkmc')" min-width="120" prop="name" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.bjje')" min-width="100" prop="balance" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.bjyxqz')" min-width="160" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.balanceValidTimeEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.zsje')" min-width="100" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.giveBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.zsyxqz')" min-width="160" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.giveBalanceValidTimeEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.caozuo')" min-width="80" show-overflow-tooltip>
        <template v-slot="scope">
          <span
            v-if="meta.indexOf('MemberWithdrawal') > -1"
            class="primaryColor pointer"
            @click="handleWithdraw(scope.row)"
          >{{ $t('message.tx') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :integrated="false" :total="total" :page="pagination.page" @current-change="handleCurrentChange" />
    <el-dialog
      :title="$t('message.hykyetx')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="isShowWithdraw"
      width="600px"
      class="form_wrap"
    >
      <div class="header df_ac">
        <span class="flex1">{{ $t('message.bjye') }}：<span class="red">{{ activeRow.balance }}{{ $t('message.yuan') }}</span></span>
        <span class="flex1">{{ $t('message.zsye') }}：{{ activeRow.giveBalance }}{{ $t('message.yuan') }}</span>
      </div>
      <el-form ref="formRef" :model="activeRow" label-width="auto" :rules="rules" label-suffix="：">
        <el-form-item prop="amount" :label="$t('message.bjjs')">
          <el-input
            v-model="activeRow.amount"
            :maxlength="50"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            clearable
          />
          <div class="placeholder9">{{ $t('message.zgjewbjye') }}</div>
        </el-form-item>
        <el-form-item prop="giveAmount" :label="$t('message.zjjs')">
          <el-input
            v-model="activeRow.giveAmount"
            :maxlength="50"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            clearable
          />
          <div class="placeholder9">{{ $t('message.zgjewzjye') }}</div>
        </el-form-item>
        <el-form-item prop="realAmount" :label="$t('message.sdje')">
          <el-input
            v-model="activeRow.realAmount"
            :maxlength="50"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            clearable
          />
          <div class="placeholder9">{{ $t('message.zgjewbjye') }}</div>
        </el-form-item>
        <el-form-item prop="note" :label="$t('message.txsm')">
          <el-input v-model="activeRow.note" clearable :placeholder="$t('message.qsr') + $t('message.shuomin')" />
        </el-form-item>
        <el-form-item prop="type" :label="$t('message.txfs')">
          <el-radio-group v-model="activeRow.type">
            <el-radio-button label="0">{{ $t('message.wx') }}</el-radio-button>
            <el-radio-button label="1">{{ $t('message.zfb') }}</el-radio-button>
            <el-radio-button label="2">{{ $t('message.xj') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowWithdraw = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  specialCardByMemId,
  memberWithdraw
} from '@/api'
export default {
  props: {
    memberInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isShowWithdraw: false,
      subLoading: false,
      activeRow: {
        type: '0',
        amount: '',
        giveAmount: ''
      },
      list: [],
      meta: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      rules: {
        amount: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        realAmount: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        giveAmount: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        note: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        type: [{ required: true, message: this.$t('message.qxz'), trigger: 'change' }]
      },
      modalDialog: this.$store.getters.dialog
    }
  },
  created() {
    this.getList()
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    onSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          const param = { ...this.activeRow }
          if (param.realAmount > param.balance) {
            return this.$message.warning(this.$t('message.sdjeyxydybj'))
          }
          param.amount = param.amount * 1
          param.giveAmount = param.giveAmount * 1
          this.subLoading = true
          memberWithdraw({ param: { ...param, cardType: '1', cardId: param.id, memberId: this.memberInfo.id }}).then(res => {
            if (res.errorCode !== '000000') return
            this.subLoading = false
            this.isShowWithdraw = false
            this.$message.success(this.$t('message.txcg'))
            this.getList()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    handleWithdraw(row) {
      this.activeRow = { ...row, amount: row.balance, giveAmount: row.giveBalance, type: '0' }
      this.isShowWithdraw = true
    },
    getList(page) {
      this.listLoading = true
      if (page) {
        this.pagination.page = page
      }
      specialCardByMemId({ pagination: this.pagination, param: { memberId: this.memberInfo.id }}).then(res => {
        this.listLoading = false
        if (res.errorCode !== '000000') return
        this.list = res.recordList
        this.total = res.totalCount
      })
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.form_wrap {
  div {
    line-height: 24px;
  }

  .header {
    background-color: #f7f7f7;
    padding: 10px 60px;
    margin: 0 22px 20px;
  }
}
</style>
